<template>
  <!-- 搜索框 -->
  <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <!-- 产品列表 -->
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
    <van-card
      v-for="item in productList"
      :key="item.id"
      :title="item.name"
      :desc="item.category"
      :price="item.price"
      :thumb="item.coverImage"
      :tag="item.tag"
    />
  </van-list>

  <!-- 分页 -->
  <van-pagination
    v-model="currentPage"
    :total-items="total"
    :items-per-page="perPage"
    mode="simple"
    @change="onPageChange"
  />

  <div class="spacer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const value = ref('') // 搜索框的绑定值
const url = 'http://localhost:1337' // 接口地址
const currentPage = ref(1) // 当前页码
const perPage = ref(10) // 每页显示数量
const total = ref(0) // 总记录数
const productList = ref([]) // 产品列表
const loading = ref(false) // 加载状态
const finished = ref(false) // 是否加载完成

// 搜索功能
async function onSearch() {
  console.log('搜索关键词:', value.value)
  currentPage.value = 1 // 重置页码
  await fetchProducts()
}

// 获取产品列表
async function fetchProducts() {
  loading.value = true
  try {
    const response = await axios.get(`${url}/api/v1/products`, {
      params: {
        page: currentPage.value,
        per: perPage.value,
        name: value.value, // 搜索关键词
      },
    })

    const { code, pages, total: totalItems, data } = response.data
    console.log('获取数据成功:', response.data)

    if (code === 1) {
      total.value = totalItems // 更新总记录数

      // 解析 coverImage 字段，提取图片 URL
      data.forEach((item) => {
        // 使用正则表达式提取图片URL
        const match = item.coverImage.match(/https?:\/\/[^"]+/)
        if (match) {
          item.coverImage = match[0] // 提取匹配的URL
        } else {
          item.coverImage = '' // 如果解析失败，设置为空字符串
        }
      })

      productList.value = data // 更新产品列表
      finished.value = false // 重置加载完成状态
    } else {
      console.error('获取数据失败:', response.data)
      finished.value = true // 设置加载完成
    }
  } catch (error) {
    console.error('请求失败:', error)
    finished.value = true // 设置加载完成
  } finally {
    loading.value = false
  }
}

// 分页切换
function onPageChange(page) {
  console.log('切换到第', page, '页')
  currentPage.value = page // 更新当前页码
  fetchProducts() // 重新加载数据
}

// 页面加载时获取初始数据
onMounted(() => {
  fetchProducts()
})
</script>

<style scoped>
.spacer {
  height: 50px; /* 根据需要调整高度 */
}
</style>
